<script setup lang="ts">
import { useMisApi } from '@/api/mis'
import { computed, onMounted } from 'vue'
import { dayjs, ElMessageBox } from 'element-plus'
import { AlarmClock, Check, CloseBold, Refresh } from '@element-plus/icons-vue'
import { themeConfig } from '@/storage'
import type { WaitRowType } from '@/views/home/interface'

interface Props {
  items: WaitRowType[]
}

const { PutFinish, PutAllFinish } = useMisApi()

const { reminderDays } = themeConfig.value

const modelValue = defineModel<Date | string | undefined>()

const emit = defineEmits(['fetch'])

const props = defineProps<Props>()

const list = computed(() => {
  if (modelValue.value) {
    return props.items.filter(f => f.end_date_day === modelValue.value)
  } else {
    return props.items
  }
})

const onPutAllFinish = () => {
  ElMessageBox.confirm(`确认要全部标记成已办吗？`, '提示', {
    confirmButtonText: '确认标记',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      PutAllFinish().then(onFetch)
    })
    .catch(() => {
    })
}

const onFinishChange = (value: boolean, item: WaitRowType) => {
  if (value) {
    PutFinish({ id: item.id }).then(() => {
      setTimeout(onFetch, 600)
    })
  }
}

const getClassColor = (item: WaitRowType) => {
  if (item.diffDays < 0) {
    return 'bg-success-light color-success'
  } else if (item.diffDays <= 3) {
    return 'bg-danger-light color-danger'
  } else if (item.diffDays <= reminderDays) {
    return 'bg-warning-light color-warning'
  }
}

const clearModelValue = () => {
  modelValue.value = undefined
}

const onFetch = async () => {
  emit('fetch')
}

onMounted(() => {
  onFetch()
})

</script>

<template>
  <div class="home-app flex flex-column pb5">
    <div class="my3 flex align-center">
      <div v-if="modelValue" class="font-bold flex align-center cursor-pointer color-primary ml5"
           @click="clearModelValue">
        <span>{{ dayjs(modelValue).format('YYYY年MM月DD日') }}（{{ list.length }}）</span>
        <el-icon class="color-danger">
          <CloseBold />
        </el-icon>
      </div>
      <span v-else class="font-bold ml5">我的待办（{{ list.length }}）</span>
      <div class="ml-auto">
        <el-button :icon="Check" circle @click="onPutAllFinish" title="全部标记为已办" />
        <el-button :icon="Refresh" circle @click="onFetch" title="刷新待办" class="ml5" />
        <router-link to="/oa/todo" class="ml5">
          <el-button :icon="AlarmClock" circle title="前往待办管理页面" />
        </router-link>
      </div>
    </div>
    <el-empty v-if="!list.length" :image-size="30" class="py0" description="暂无待办"></el-empty>
    <div class="w100 flex-grow overflow-y-auto" v-else>
      <div
        v-for="(item, index) in list" :key="index"
        class="home-app-item mb1 pa5" style="line-height: 16px"
        :class="[getClassColor(item),{'finish': item.finish}]">
        <div class="flex align-center mb2">
          <span class="font-bold font14">{{ item.title }}</span>
          <el-checkbox class="ml-auto"
            v-model="item.finish" style="height: 20px;margin-right: 0;" label="已办" :disabled="item.finish"
            border @change="onFinishChange($event,item)" />
        </div>
        <div class="flex align-center mb3">
          <span class="color-info">{{ item.diffDays < 0 ? '过期:':'剩:' }}</span>
          <span v-if="item.diffDays < 0">{{ item.diffDays }}天</span>
          <span v-else-if="item.diffDays <= reminderDays">{{ item.diffDays }}天</span>
          <span v-else>{{ item.diffDays }}天</span>
          <span class="ml-auto">{{ dayjs(item.end_date).format('YYYY-MM-DD') }}</span>
        </div>
        <div class="color-info">{{ item.descript }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-app-item {
  border-radius: 4px;

  &.finish {
    transition: transform 0.5s ease-in-out;
    transform: translateX(-100%);
  }
}
</style>
